<template>
  <div class="all" id="container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      style="background-color:rgba(0,0,0,0);border:0px solid;"
      background-color="#ffffff00"
      text-color="#fff"
      active-text-color="#46d233"
    >
      <el-menu-item index="1" style="border-bottom: none;">
        <img
          class="img"
          @click="$router.push('/')"
          src="//static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_header/i/logo_e752fb2.png"
          alt
        />
      </el-menu-item>
      <el-submenu index="2" class="displayNone">
        <template #title style="border-bottom: none;">作品</template>
        <el-menu-item index="2-1" style="border-bottom: none; color:#000 " @click="$router.push('/Skills')">技巧</el-menu-item>
        <el-menu-item index="2-2" style="border-bottom: none; color:#000 ">极限摄影</el-menu-item>
      </el-submenu>
      <el-submenu index="3" class="displayNone">
        <template #title style="border-bottom: none;">社区</template>
        <el-menu-item index="3-1" style="border-bottom: none; color:#000 ">好友动态</el-menu-item>
        <el-menu-item index="3-2" style="border-bottom: none; color:#000 ">摄影师</el-menu-item>
      </el-submenu>
      <el-menu-item index="4" style="border-bottom: none;">活动</el-menu-item>
      <el-menu-item index="5" style="border-bottom: none;">排行榜</el-menu-item>
      <el-menu-item index="6" style="border-bottom: none;">下载APP</el-menu-item>
    </el-menu>
    <div class="second">
      <div class="input">
        <el-input placeholder="搜索你喜欢的" v-model="input" clearable>
          <template #append>
            <i class="el-icon-search" @click="$router.push('')"></i>
          </template>
        </el-input>
      </div>
      <div>
        <div>
          <button class="zhuce" @click="$router.push('/register')">注册</button>
          <button class="denglu" @click="$router.push('/Login')">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {},
  setup() {
    return {
      activeIndex: "1",
      input: ref("")
    };
  },
  data() {
    return {};
  },
  methods: {}
});
</script>
<style scoped lang="less">
#container {
  min-width: 1300px;
}
.all {
  width: 100%;
  height: auto;
  z-index: 999;
  position: absolute;
  margin-top: 10px;
  img {
    margin-left: 10px;
    width: 120px;
  }
  .el-menu-demo {
    width: 50%;
    margin-left: 50px;
    float: left;
  }
  .displayNone {
    /deep/.is.opened {
      border: none;
    }
    /deep/.el-submenu__title {
      border-bottom: none;
      border-bottom-color: #fff;
    }
  }
  .second {
    margin-top: -48px;
    float: right;
    width: 48%;
    font-size: 20px;

    .zhuce {
      border: 0px;
      background-color: rgba(255, 255, 255, 0);
      color: #fff;
      font-size: 16px;
      margin-top: 10px;
    }

    .denglu {
      width: 80px;
      height: 40px;
      color: #fff;
      background-color: #46d233;
      border: 0px;
      font-size: 16px;
      float: right;
      margin-right: 55px;
      margin-top: 0;
    }
    .input {
      width: 250px;
      float: left;
      margin-left: 25%;
    }
  }
}
</style>